<template>
    <div id="main">
        <el-card shadow="always">
            <el-form ref="management" :inline="true" size="small" style="display:flex;justify-content: space-between">
                <el-form-item>
                    <el-input placeholder="请输入服务名称" suffix-icon="el-icon-search" v-model="keyword"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="searchId" class="searchId">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="handleAdd">增加</el-button>
                </el-form-item>

            </el-form>
            <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                style="width: 100%">
                <el-table-column label="英文能力名称" prop="serviceNameE">
                </el-table-column>
                <el-table-column label="能力创建者" prop="createBy">
                </el-table-column>
                <el-table-column label="能力类型" prop="serviceType">
                  <template slot-scope="scope">
                    {{
                      scope.row.serviceType == 4 ? '认证接口' :
                        scope.row.serviceType == 1 ? '查询接口' :
                          scope.row.serviceType == 2 ? '信息接口' :
                            '写入接口'
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="能力地址" prop="url">
                </el-table-column>
                <el-table-column label="更新时间" prop="updateTime">
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 0 ? 'orange' : 'danger'"
                            disable-transitions>{{ scope.row.status == 0 ? '未审核' : "审核不通过" }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="210%">
                    <!-- <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template> -->
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                      <el-button size="mini" @click="detail(scope.$index, scope.row)">审核</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination  background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[4, 6, 8, 10]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
                </el-pagination>
            </div>
            <!-- 新增对话框 -->
            <el-dialog title="新增发布" :visible.sync="open1" center>
                <el-form :model="form" ref="form" :rules="rules" label-position="left" class="form1">
                    <el-form-item label="中文能力名称" prop="serviceNameC" :label-width="formLabelWidth">
                        <el-input v-model="form.serviceNameC"></el-input>
                    </el-form-item>
                    <el-form-item label="英文能力名称" prop="serviceNameE" :label-width="formLabelWidth">
                        <el-input v-model="form.serviceNameE"></el-input>
                    </el-form-item>
                    <el-form-item label="能力创建者" prop="createBy" :label-width="formLabelWidth">
                        <el-input v-model="form.createBy"></el-input>
                    </el-form-item>
                    <el-form-item label="能力类型" prop="serviceType" :label-width="formLabelWidth">
                      <el-select v-model="form.serviceType" placeholder="请选择能力类型" style="width: 50%">
                        <el-option label="认证接口" value=4></el-option>
                        <el-option label="查询接口" value=1></el-option>
                        <el-option label="信息接口" value=2></el-option>
                        <el-option label="写入接口" value=3></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="对外能力地址" prop="url" :label-width="formLabelWidth">
                        <el-input disabled style="width: 50%" value="http://8.130.182.157:8000"></el-input >
                      <el-input  placeholder="请输入对外路由，以“/”开头" style="width: 50%" v-model="form.url"></el-input>
                    </el-form-item>
                    <el-form-item label="后台真实地址" prop="host" :label-width="formLabelWidth">
                        <el-input v-model="form.host"></el-input>
                    </el-form-item>
                  <el-form-item label="节流值(次/min)"  prop="levelgroup" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="form.levelgroup" >
                      <el-checkbox label="1000"></el-checkbox><br>
                      <el-checkbox label="2000"></el-checkbox><br>
                      <el-checkbox label="3000"></el-checkbox><br>
                      <el-checkbox label="4000"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 修改对话框 -->
            <el-dialog title="修改发布" :visible.sync="open" center>
                <el-form :model="form" ref="form" :rules="rules" label-position="left">
                  <el-form-item label="中文能力名称" prop="serviceNameC" :label-width="formLabelWidth">
                    <el-input v-model="form.serviceNameC"></el-input>
                  </el-form-item>
                  <el-form-item label="英文能力名称" prop="serviceNameE" :label-width="formLabelWidth">
                    <el-input v-model="form.serviceNameE"></el-input>
                  </el-form-item>
                  <el-form-item label="能力创建者" prop="createBy" :label-width="formLabelWidth">
                    <el-input v-model="form.createBy"></el-input>
                  </el-form-item>
                  <el-form-item label="能力类型" prop="serviceType" :label-width="formLabelWidth">
                   <el-select v-model="form.serviceType" placeholder="请选择能力类型">
                     <el-option label="认证接口" value=4></el-option>
                     <el-option label="查询接口" value=1></el-option>
                     <el-option label="信息接口" value=2></el-option>
                     <el-option label="写入接口" value=3></el-option>
                   </el-select>

                  </el-form-item>
                  <el-form-item label="对外能力地址" prop="url" :label-width="formLabelWidth">

                    <el-input   v-model="form.url"></el-input>
                  </el-form-item>
                  <el-form-item label="后台真实地址" prop="host"  :label-width="formLabelWidth">
                    <el-input v-model="form.host"></el-input>
                  </el-form-item >
                  <el-form-item label="节流值(次/min)"  prop="levelgroup" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="form.levelgroup" >
                      <el-checkbox label="1000"></el-checkbox><br>
                      <el-checkbox label="2000"></el-checkbox><br>
                      <el-checkbox label="3000"></el-checkbox><br>
                      <el-checkbox label="4000"></el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import {addpublic, delpublic, listpublic,updatepublic,apppublic,noapppublic,listonepublic} from "../../api/system/publicationList";
export default {
    data() {
        return {
          with:'120px',
            tableData: [],
            keyword:'',
            uuid:'',
            total: 2,
            pageNum: 1,
            pageSize: 10,
            currentPage: 1,
            form: {
                createBy: '',
                serviceNameE: '',
                serviceNameC: '',
                host: '',
                url: '',
                serviceType: 0,
                status:0,
                levelgroup: []
            },
            formLabelWidth: '120px',
            open: false,
            open1: false,
            openDetail: false,
            rules: {
                name: [
                    { required: true, message: "能力名称不能为空", trigger: "blur" }
                ],
                user: [
                    { required: true, message: "能力创建者不能为空", trigger: "blur" }
                ],
                type: [
                    { required: true, message: "能力类型不能为空", trigger: "blur" }
                ],
                address: [
                    { required: true, message: "能力地址不能为空", trigger: "blur" }
                ],
              levelgroup: [
                { validator: this.validateLevelGroup, trigger: 'change' }
              ]
            }
        }
    },
    methods: {
      validateLevelGroup(rule, value, callback) {
        if (value.length === 0) {
          callback(new Error('请选择至少一个选项'));
        } else {
          callback();
        }
      },
        getList() {
            this.loading = true;
            listpublic().then(response => {
                this.tableData = response.rows;
            })
        },
        searchId(){
          listonepublic(this.keyword).then(res=>{
            console.log('查找成功',res.rows)
            this.tableData = res.rows;
          })
        },
        handleEdit(index, row) {
            console.log(row)
            this.form = row
           console.log(this.form.levelgroup)
            this.uuid = row.uuid
            this.open = true
        },
        handleDelete(index, row) {
          console.log(row.uuid)
          this.$confirm('是否确认删除编号为"' + row.uuid + '"的数据项？').then(() => {
            delpublic(row.uuid).then(res=>{
              this.getList()
              this.$modal.msgSuccess("删除成功");
            })
          })

        },
        handleSizeChange(val) {
            this.currentPage = 1
            this.pageSize = val
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleAdd() {
            this.$refs['form']?.clearValidate()
            this.reset()
          console.log(this.form.levelgroup)
            this.open1 = true
        },
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                  if(this.uuid){
                    updatepublic(this.form).then(res=>{
                      this.$modal.msgSuccess("修改成功");
                      this.uuid = ''
                      this.getList();

                    })
                  }else{
                    this.form.url="http://8.130.182.157:8000"+this.form.url
                    addpublic(this.form).then(res => {
                      this.$modal.msgSuccess("添加成功");
                      this.reset()
                      this.getList();
                    })
                  }
                    this.open = false
                    this.open1 = false
                    this.reset()
                    this.uuid = ''
                  this.getList();
                } else {
                  this.getList();
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        reset() {

            this.form = {
                createBy: '',
                serviceNameE: '',
                serviceNameC: '',
                host: '',
                url: '',
                serviceType: 0,
                status:0,
                levelgroup: []
            }
        },
        cancel() {
            this.reset()
          this.uuid = ''
            this.open = false
            this.open1 = false
          this.getList()
        },
        detail(index, row) {
            this.$router.push({
                path: '/management',
                query: {
                  createBy: row.createBy,
                  serviceNameE:row.serviceNameE,
                  serviceNameC:row.serviceNameC,
                  uuid:row.uuid,
                  url:row.url,
                  host:row.host,
                  serviceType:row.serviceType,
                  levelgroup : row.levelgroup
                }
            })
          this.$store.state.fuwu.createBy = row.createBy
          this.$store.state.fuwu.serviceNameE = row.serviceNameE
          this.$store.state.fuwu.serviceNameC = row.serviceNameC
          this.$store.state.fuwu.uuid = row.uuid
          this.$store.state.fuwu.url = row.url
          this.$store.state.fuwu.host = row.host
          this.$store.state.fuwu.serviceType = row.serviceType
          this.$store.state.fuwu.levelgroup = row.levelgroup
        }
    },
    created() {
        this.getList();
    },
}
</script>
<style lang="scss" scoped>
/* 卡片样式 */
.el-card {
    width: 98%;
    margin: 10px auto;
}

/* 新增按钮样式 */
.add {
    font-size: 10px;
    margin: 20px 0 10px 93%;
}

/* 分页器样式 */
.block {
    margin: 20px 0 0 60%;
}
.searchId{
  position: absolute;
}
</style>
